<!-- 侧边抽屉 -->
<template>
  <div>
    <el-drawer
      :visible.sync="drawer"
      :with-header="false"
      direction="ltr"
      size="60%"
    >
      <div class="drawer-box">
        <!-- 头像 -->
        <el-avatar
          src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
          :size="96"
        ></el-avatar>
        <p class="name">Dong Jie</p>
        <!-- 数字区域 -->
        <div class="num-box">
          <div class="left">
            <p class="num">{{ blogNum }}</p>
            <p class="title">Article</p>
          </div>
          <div class="right">
            <p class="num">{{ tagNum }}</p>
            <p class="title">Tag</p>
          </div>
        </div>
        <!-- 导航区域 -->
        <ul class="menu-mobile">
          <li
            v-for="item in nav"
            :key="item.path"
            :class="$route.path == item.path ? 'active' : ''"
            @click="togglePath(item.path)"
          >
            <i :class="`iconfont ${item.icon}`" />
            {{ item.name }}
          </li>
          <!-- <li><i class="iconfont icon-fenlei" /> 分类</li>
      <li><i class="iconfont icon-label" /> 友链</li>
      <li><i class="iconfont icon-mine" /> 关于</li> -->
        </ul>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      nav: [
        { name: "首页", path: "/home", icon: "icon-home" },
        { name: "分类", path: "/category", icon: "icon-fenlei" },
        { name: "工具", path: "/link", icon: "icon-label" },
        { name: "关于", path: "/about", icon: "icon-mine" }
      ],
      blogNum: 0,
      tagNum: 0
    };
  },

  computed: {
    drawer: {
      get() {
        return this.$store.state.showDrawer;
      },
      set() {
        this.$store.commit("showDrawer");
      }
    }
  },

  created() {
    this.getBlogAndTagNum();
  },

  methods: {
    toggleDrawer() {
      this.drawer = !this.drawer;
    },
    togglePath(path) {
      if (path != this.$route.path || path != this.$route.fullPath) {
        this.$router.push(path);
        this.toggleDrawer();
      }
    },
    async getBlogAndTagNum() {
      const { data: res } = await this.$api.webApi.getBlogAndTagNum();
      console.log(res);
      this.blogNum = res.data.blogNum;
      this.tagNum = res.data.tagNum;
    }
  }
};
</script>
<style lang="scss" scoped>
.drawer-box {
  height: 100vh;
  line-height: normal;
  color: rgb(24, 24, 24);

  .el-avatar {
    margin: 48px auto 0;
  }

  .name {
    margin: 24px 0;
  }

  .num-box {
    display: flex;
    margin-top: 20px;
    div {
      flex: 1;
    }
    p {
      text-align: center;
    }
    .left {
      border-right: 1px solid #000;
      text-align: right;
    }
    .right {
      text-align: left;
    }
    .num {
      font-size: 20px;
    }
    .title {
      font-size: 12px;
      margin-top: 5px;
      color: rgb(66, 66, 66);
    }
  }

  .menu-mobile {
    text-align: left;
    padding: 15px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    margin-top: 20px;
    li {
      height: 50px;
      line-height: 50px;
      padding-left: 20px;
      &:active {
        background-color: #eee;
      }
    }
  }
}
</style>
